"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/14
 */
import * as React from 'react'
import MyText from "./MyText";
import {SCREEN_WIDTH} from "../constant";
import {autoSize, commonStyles} from "../assets/styles/common";
import {reserveStyles} from "../assets/styles/reserve";
import Colors from "../assets/styles/Colors";
import TimeAreaPicker from "./TimeAreaPicker";
import Request from "../utils/Request";
import {commentStyles} from "../assets/styles/guide";
import {ReserveRoomItemProps} from "../interface/component";
import MyIcon from "./icon";
import MyImage from "./MyImage";

const moment = require("moment");
const {View, StyleSheet, ImageBackground} = require('react-native');
const {connect} = require('react-redux');
const {List, DatePicker} = require('antd-mobile');
let InputItemStyle = require('antd-mobile/lib/list/style/index');
const {CachedImageBackground} = require('react-native-img-cache');
const newStyle = {};
(() => {
    for (const key in InputItemStyle) {
        if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
            newStyle[key] = {...StyleSheet.flatten(InputItemStyle[key])};
            if (key === 'underlayColor') {
                newStyle['underlayColor'].backgroundColor = 'transparent';

            }
        }
    }
})();
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);

class ReserveRoomItem extends React.Component<ReserveRoomItemProps, any> {

    state = {
        showDataPicker: false,
        selectedDate: this.props.date ? this.props.date : now
    };


    componentWillReceiveProps(nextProps: ReserveRoomItemProps, nextContext: any): void {
        if (this.props !== nextProps) {

            this.setState({selectedDate: nextProps.date});
        }
    }

    showDataPicker = () => {
        this.setState({showDataPicker: true});
    };

    getText = () => {
        let text = '';
        let tip = '今天, ';
        const sm = moment(this.state.selectedDate);
        const n = moment(now);
        text = sm.format('YYYY-MM-DD');
        const diff = sm.diff(n);
        const hour = diff / (1000 * 60 * 60);
        if (hour >= 24 && hour < 48) {
            tip = '明天, ';
        } else if (hour >= 48) {
            tip = ''
        }
        return tip + text;
    };

    render() {
        const item: roomItem = this.props.item;
        return (
            <List styles={StyleSheet.create(newStyle)}>
                <CachedImageBackground source={{uri: Request.checkImageUrl(item.img) + ''}} style={reserveStyles.room}>
                    <View style={[commonStyles.flexRow, {justifyContent: 'space-between', alignItems: 'flex-end'}]}>
                        <View>
                            <MyText color={Colors.White} fontSize={20}>房间7A</MyText>
                            <MyText color={Colors.White} fontSize={14}>{`${item.seat}座位`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow]}>
                            {item.board ? <MyText color={Colors.White} fontSize={16}>白版</MyText> : null}
                            {item.tv ? <MyText color={Colors.White} fontSize={16}>电视</MyText> : null}
                            {item.phone ? <MyText color={Colors.White} fontSize={16}>电话</MyText> : null}
                        </View>
                    </View>
                </CachedImageBackground>

                {this.props.canPickDate ? <List.Item onClick={this.showDataPicker}
                                                     thumb={<MyIcon name={'icon-riqi'} size={autoSize(15)}
                                                                    color={Colors.SubTitle}/>}>
                    <MyText style={{marginLeft: 5}}
                            color={this.state.showDataPicker ? Colors.Active : Colors.Title}>{this.getText()}</MyText>

                </List.Item> : null}

                <TimeAreaPicker {...this.props}
                                start={moment()}
                                date={this.state.selectedDate}
                                roomItem={item}/>

                <DatePicker mode={'date'}
                            minDate={now}
                            visible={this.state.showDataPicker}
                            value={this.state.selectedDate}
                            onOk={selectedDate => this.setState({selectedDate, showDataPicker: false})}
                            onDismiss={() => this.setState({showDataPicker: false})}
                />
            </List>
        );
    }
}


export default ReserveRoomItem;